﻿<!--有个Bug啊,不后端分页的时候没有勾选列会出现奇怪的数据显示不全的问题-->
<template>
    <el-col :sm="24">
        <!--<div class="tab-filter-type">

        </div>-->
        <div style="width:100%;margin-top:5px; border: 1px solid #EBEEF5;border-bottom: 0px;text-align:left;padding:5px;font-size:16px">
            <el-row style="padding:5px">
                <el-col :span="12">
                    <p style="text-align:left;margin-right:5px">
                        {{pzoption.title}},当前显示<span class="text-danger">{{datalength}}</span>条数据.

                    </p>
                </el-col>
                <el-col :span="12">
                    <p style="text-align:right;margin-right:5px">
                        <a @click="exportxls()" style="color:dodgerblue">导出,</a><a style="color:dodgerblue" @click.stop="dialogFiledVisible = true">字段设置</a>
                    </p>
                </el-col>

            </el-row>


        </div>
        <div style="width:100%;padding-left:10px; border: 1px solid #EBEEF5;border-bottom: 0px;">
            <el-row style="padding:5px">
                <el-col :span="24">

                    <el-select size="mini" v-for="item in pzoption.dtcxdata" filterable clearable v-model="item.val" :placeholder="'选择'+item.cxname+'筛选'" @change="selchange" class="form-control filter" style="height: 34px;min-width:120px;max-width:160px;padding:0px;margin-top:10px;margin-bottom:10px;margin-left:5px">
                        <el-option v-for="lb in item.dtsource"
                                   :key="lb.val"
                                   :label="lb.val"
                                   :value="lb.val">
                        </el-option>
                    </el-select>

                    <div style=" display: inline-flex; ">
                        <div class="input-group" style="margin-top: 10px;margin-left:10PX;margin-bottom:10px">
                            <el-tag v-for="tag in tabquerydata" style="margin-right:5px"
                                    :key="tag.colid"
                                    @close="handleClose(tag)"
                                    closable
                                    type="">
                                {{tag.qname}}
                            </el-tag>
                            <div class="input-group-btn" style="width:auto">
                                <button type="button" style="min-width:90PX;height: 34px;" class="btn btn-info  dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">{{sear.colname}} <span class="caret"></span></button>
                                <ul class="dropdown-menu">
                                    <li v-for="fi in pzoption.collist" @click="sel(fi)"><a href="#" v-text="fi.colname"></a></li>
                                </ul>
                            </div>
                            <el-select placeholder="请选择筛选类型" size="mini" v-model="cal" class="form-control filter" style="height: 34px;width:100px;padding:0px">
                                <el-option label="等于" value="0"></el-option>
                                <el-option label="小于" value="1"></el-option>
                                <el-option label="大于" value="2"></el-option>
                                <el-option label="不等于" value="3"></el-option>
                                <el-option label="包含" value="4"></el-option>
                                <el-option label="在列表中(逗号隔开)" value="6"></el-option>
                            </el-select>
                            <el-input style="height: 34px;border-left-width: 0px;width:150px" size="medium" placeholder="输入关键字搜索" id="searchinput" v-model="seastr" clearable></el-input>
                            <!--<el-tooltip content="查询按钮" placement="top">
                                <button type="button" class="btn btn-info" @click="addSearch()" style="height: 34px; margin-top: -2px;">
                                    <span class="glyphicon glyphicon glyphicon-search" aria-hidden="true" style="margin-right:0px"></span>
                                </button>
                            </el-tooltip>-->
                            <el-tooltip content="添加为查询条件" placement="top">
                                <button type="button" class="btn btn-info" @click="addQ()" style="height: 34px; margin-top: -2px;">
                                    <span class="glyphicon glyphicon-plus" aria-hidden="true" style="margin-right:0px"></span>
                                </button>
                            </el-tooltip>

                        </div>
                    </div>

                </el-col>

            </el-row>


        </div>
        <pl-table :id="tabid" class="qjTable" ref="qjTable" :show-summary="ishj" :summary-method="getSummaries"  @header-dragend="headerWidth"  v-loading="pzoption.loading" :height="height" :cell-style="{height:'16px'}" style="font-size: 10px" element-loading-text="数据太多,拼命加载中...请耐心等候" element-loading-spinner="el-icon-loading" :data="qjtabledata" @selection-change="handleSelectionChange" stripe border fit use-virtual big-data-checkbox :row-class-name="tableRowClassName">

            <pl-table-column type="selection" width="60" v-if="pzoption.issel" fixed="left">
            </pl-table-column>

            <!--:sortable="col.sort"-->
            <pl-table-column v-for="col in pzoption.collist" :prop="col.colid" :label="col.colname"   :key="col.colid" v-if="col.isshow" :width="col.width" min-width="80" align="center" :colid="col.colid" :show-overflow-tooltip="col.istip" :sortable="issort">
                <template slot-scope="scope">
                    <span v-html="rowcov(scope.row,col)">
                    </span>
                </template>
            </pl-table-column>


            <pl-table-column type="index" width="60" fixed="left" v-if="pzoption.isxh"> </pl-table-column>
            <pl-table-column label="操作列" min-width="80" align="center" v-if="iscz&&pzoption.collist.length>6" fixed="left">
                <template slot-scope="scope">
                    <el-button v-for="czcol in pzoption.czltabledata" v-if="czcol.isshow" @click="mangcol(scope.row,czcol)" :type="czcol.bttype" size="mini">{{czcol.colname}}</el-button>
                </template>
            </pl-table-column>
            <pl-table-column label="操作列" min-width="80" align="center" v-if="iscz&&pzoption.collist.length<7">
                <template slot-scope="scope">
                    <el-button v-for="czcol in pzoption.czltabledata" v-if="czcol.isshow" @click="mangcol(scope.row,czcol)" :type="czcol.bttype" size="mini">{{czcol.colname}}</el-button>
                </template>
            </pl-table-column>
        </pl-table>
        <div style="text-align:center;margin-top:5px" v-if="ispage">
            <el-pagination @size-change="handleSizeChange"
                           @current-change="handleCurrentChange"
                           :current-page="pzoption.pageindex"
                           :page-sizes="[200,1000,3000,10000,100000]"
                           :page-size="pzoption.pagesize"
                           layout="total, sizes, prev, pager, next"
                           :total="pzoption.pageallcount">
            </el-pagination>
        </div>

        <el-dialog title="字段筛选" :visible.sync="dialogFiledVisible" center>
            <el-checkbox v-for="filed in pzoption.collist" v-model="filed.isshow">{{filed.colname}}</el-checkbox>
        </el-dialog>

    </el-col>

</template>
<style>
    .filter .el-input__inner {
        height: 32px;
        line-height: 32px;
        border: 0px;
    }

    .el-input--medium .el-input__inner {
        height: 34px !important;
        line-height: 34px !important;
        border-radius: 0px !important;
        border-left: 0px !important;
    }

    .pl-table__fixed-right {
        height: 100% !important;
    }

    .el-dialog__footer {
        margin-top: 30PX;
    }

    .tableRowClassName {
    }

    .qjTable .el-table td, .qjTable .el-table th {
        FONT-SIZE: 12PX;
        padding: 6px 0;
    }

    .tabletool {
        float: right;
        margin-right: 10px;
        color: dodgerblue;
        font-size: 13PX;
    }

    .qjTable .el-table th:hover .caret-wrapper {
        visibility: visible;
    }

    .caret-wrapper {
        visibility: hidden;
        position: absolute !important;
        TOP: -5px;
    }
</style>
<script>
    module.exports = {
        name: "qjtable",
        props: ['pzoption', 'nocache'],
        components: {
            'base-loading': httpVueLoader('/ViewV5/Base/Vue/Loading.vue')
        },
        data() {
            return {

                tabid: Math.floor(Math.random() * (90000 - 10000 + 1) + 10000),
                sear: {},
                seastr: "",
                localwidthdata: [],
                issort: true,
                cal: "4",
                tabquerydata: [],//动态查询组件数据
                mrcxdata: [],//默认查询组件
                summary: true,
                dialogFiledVisible: false,
                qjtabledata: [],//显示数据
                childpro: {
                    multipleSelection: "",
                    locadata: [],
                    height: 500,
                    loading: false,
                    isxh: true,//序号列
                    ishj: true,
                    ispage: false,//是否前端分页
                    pageshow: true//是否显示分页组件
                }
            };
        },
        computed: {
            // 计算属性的 getter
            iscz: function () {
                var chi = this;
                return _.findIndex(chi.pzoption.czltabledata, function (col) {
                    return col.isshow
                }) > -1
            },
            height: function () {
                var chi = this;
                return chi.pzoption.height || chi.childpro.height;
            },
            loading: function () {
                var chi = this;
                return chi.pzoption.loading || chi.childpro.loading;
            },
            isxh: function () {
                var chi = this;
                return chi.pzoption.isxh && chi.childpro.isxh;
            },
            ishj: function () {
                var chi = this;
                return chi.pzoption.ishj && chi.childpro.ishj;
            },
            ispage: function () {
                var chi = this;
                return chi.pzoption.ispage || chi.childpro.ispage;
            },
            pageshow: function () {
                var chi = this;
                return chi.pzoption.pageshow || chi.childpro.pageshow;
            },
            datalength: function () {
                return this.qjtabledata.length;
            },
            qjtabledata1: function () {
                var pro = this;
                const search = pro.seastr;
                var returndata = JSON.parse(JSON.stringify(pro.pzoption.dataset).replace(/<[^>]+>/g, ""));
                if (!pro.ispage) {
                    //前端搜索,并处理动态查询条件
                    var calval = pro.seastr;
                    var qfiled = pro.sear.colid;
                    if (pro.pzoption.dtcxdata) {
                        _.forEach(pro.pzoption.dtcxdata, function (obj) {
                            obj.dtsource = pro.mangdtcxdata(obj.cxzd);
                        })
                    }

                    var temparr = returndata.filter(data => {
                        switch (pro.cal) {
                            case "4":    //包含
                                {
                                    return (data[qfiled] + "").indexOf(calval) > -1;
                                }
                                break;
                            case "1":    //小于
                                {
                                    return data[qfiled] * 1 < calval;

                                }
                                break;
                            case "2":    //大于
                                {
                                    return data[qfiled] * 1 > calval;

                                }
                                break;
                            case "3":    //不等于
                                {
                                    return data[qfiled] != calval;
                                }
                                break;
                            case "0":    //等于
                                {
                                    return data[qfiled] == calval;

                                }
                                break;
                            case "6":    //在列表中
                                {
                                    var bl = false;
                                    for (var i = 0; i < calval.split(",").length; i++) {
                                        if (data[qfiled].indexOf(calval.split(",")[i]) > -1) {
                                            bl = true;
                                            break;
                                        }
                                    }
                                    return bl;
                                }
                                break;
                            default: {

                            }
                        }
                    })

                    pro.pzoption.pageallcount = temparr.length;

                    return _.slice(temparr, 0, 200);
                }
                return returndata; // dataset 就是之前pl-table 的 data数据
            }
        },
        methods: {
            mangdtcxdata: function (colname) {
                var pro = this;
                var temparr = _.uniq(_.map(pro.pzoption.dataset, colname));
                var renarr = [];
                _.forEach(temparr, function (item) {
                    if (_.findIndex(renarr, function (obj) {
                        return obj.val == item.val;
                    }) == -1) {
                        renarr.push({ val: _.trim(item) });
                    }
                })
                return renarr;
                //处理动态查询数据(不分页时启用)
            },
            sel: function (col) {
                var pro = this;
                pro.sear = col;
                pro.tableQuery();
            },
            handleClose(tag) {
                this.tabquerydata.splice(this.tabquerydata.indexOf(tag), 1);
                this.tableQuery();
            },
            addSearch: function (col) {
                this.tableQuery();

            },
            tableQuery: function () {
                var pro = this;
                if (pro.ispage) {
                    //后端分页查询
                    pro.$parent.Query();
                } else {
                  
                    var returndata = JSON.parse(JSON.stringify(pro.pzoption.dataset).replace(/<[^>]+>/g, ""));

                    _.forEach(pro.tabquerydata, function (item) {
                        var qfiled = item.colid;
                        var calval = item.val;
                        var cal = item.cal;
                        if (calval) {
                            returndata = returndata.filter(data => {
                                switch (cal) {
                                    case "4":    //包含
                                        {
                                            return (data[qfiled] + "").indexOf(calval) > -1;
                                        }
                                        break;
                                    case "1":    //小于
                                        {
                                            return data[qfiled] * 1 < calval;

                                        }
                                        break;
                                    case "2":    //大于
                                        {
                                            return data[qfiled] * 1 > calval;

                                        }
                                        break;
                                    case "3":    //不等于
                                        {
                                            return data[qfiled] != calval;
                                        }
                                        break;
                                    case "0":    //等于
                                        {
                                            return data[qfiled] == calval;

                                        }
                                        break;
                                    case "6":    //在列表中
                                        {
                                            var bl = false;
                                            for (var i = 0; i < calval.split(",").length; i++) {
                                                if (data[qfiled].indexOf(calval.split(",")[i]) > -1) {
                                                    bl = true;
                                                    break;
                                                }
                                            }
                                            return bl;
                                        }
                                        break;
                                    default: {

                                    }
                                }
                            });
                        }

                    })
                    _.forEach(pro.pzoption.dtcxdata, function (item) {
                        var qfiled = item.cxzd;
                        var calval = item.val;
                        var cal = item.cal;
                        if (calval) {
                            returndata = returndata.filter(data => {
                                switch (cal) {
                                    case "4":    //包含
                                        {
                                            return (data[qfiled] + "").indexOf(calval) > -1;
                                        }
                                        break;
                                    case "1":    //小于
                                        {
                                            return data[qfiled] * 1 < calval;

                                        }
                                        break;
                                    case "2":    //大于
                                        {
                                            return data[qfiled] * 1 > calval;

                                        }
                                        break;
                                    case "3":    //不等于
                                        {
                                            return data[qfiled] != calval;
                                        }
                                        break;
                                    case "0":    //等于
                                        {
                                            return data[qfiled] == calval;

                                        }
                                        break;
                                    case "6":    //在列表中
                                        {
                                            var bl = false;
                                            for (var i = 0; i < calval.split(",").length; i++) {
                                                if (data[qfiled].indexOf(calval.split(",")[i]) > -1) {
                                                    bl = true;
                                                    break;
                                                }
                                            }
                                            return bl;
                                        }
                                        break;
                                    default: {

                                    }
                                }
                            });
                        }
                    })
                    if (pro.seastr) {
                        var serfild = pro.sear.colid;
                        returndata = returndata.filter(data => {
                            return (data[serfild] + "").indexOf(pro.seastr) > -1;
                        });
                    }
                 
                    


                    //if (!pro.pzoption.pageindex) {
                    //    pro.pzoption.pageindex = 1;
                    //}
                    //if (!pro.pzoption.pagesize) {
                    //    pro.pzoption.pagesize = 200;
                    //}
                    //var temparr = _.slice(returndata, (pro.pzoption.pageindex - 1) * pro.pzoption.pagesize, pro.pzoption.pageindex * pro.pzoption.pagesize);
                    //pro.pzoption.pageindex = 1;
                    //pro.pzoption.pageallcount = returndata.length;
                    pro.qjtabledata = returndata;

               

                }

            },
            selchange(tag) {
                this.tableQuery();
            },
            addQ: function () {

                var pro = this;
                if (!pro.seastr) {
                    pro.$notify.error({
                        title: '错误',
                        message: '请输入查询条件'
                    });
                    return;
                }
                var colname = pro.sear.colname;
                var calname = "包含";
                if (pro.cal == "0") {
                    calname = "等于";
                }
                if (pro.cal == "1") {
                    calname = "小于";
                }
                if (pro.cal == "2") {
                    calname = "大于";
                }
                if (pro.cal == "3") {
                    calname = "不等于";
                }
                if (pro.cal == "6") {
                    calname = "在列表中";
                }
                qname = colname + "--" + calname + "--" + pro.seastr;
                pro.tabquerydata.push({ colid: pro.sear.colid, cal: pro.cal, val: pro.seastr, qname: qname });
                pro.seastr = "";
                pro.tableQuery();
            },
            handleSizeChange(val) {
                this.pzoption.pagesize = val;
                this.tableQuery();
            },
            handleCurrentChange(val) {
                this.pzoption.pageindex = val;
                this.tableQuery();

            },
            headerWidth: function (newWidth, oldWidth, column, event) {
                var chi = this;
                 _.remove(chi.localwidthdata, function (n) {
                    return n.col == column.property;
                });
                chi.localwidthdata.push({ col: column.property, width: newWidth });
                localStorage.setItem(chi.$root.PageCode + chi.$root.pagedata.ExtData + "localwidthdata", JSON.stringify(chi.localwidthdata));

            },
            getSummaries: function (param) {
                var pro = this;
                const sums = [];
                var hjl = [];
                _.forEach(pro.pzoption.collist, function (col) {
                    if (col.ishj) {
                        hjl.push(col);
                    }
                })
                if (hjl.length > 0) {
                    pro.summary = true;
                }
                const { columns, data } = param;
                _.forEach(hjl, function (hjc) {
                    var colindex = 0;
                    _.forEach(columns, function (col) {
                        if (colindex === 0) {
                            sums[0] = "合计";
                        }
                        if (col.property == hjc.colid) {
                            try {
                                sums[colindex] = Math.round(_.sumBy(pro.qjtabledata, function (o) { return o[hjc.colid] * 1; }) * 100) / 100;

                            } catch (e) {

                            }
                        }
                        colindex++;

                    })
                })
                var tempdata = data;
                return sums;

            },
            handleSelectionChange(val) {
                this.$emit('selection-change', val)
            },

            tableRowClassName({ row, rowIndex }) {
                //把每一行的索引放进row
                row.index = rowIndex;
            },
            rowcov: function (rowdata, coldata) {
                try {
                    if (coldata.rowfun) {
                        return coldata.rowfun.call(this, rowdata);
                    } else {
                        return rowdata[coldata.colid];
                    }
                } catch (e) {

                }
            },
            mangcol: function (rowdata, coldata) {
                try {
                    if (coldata.mangefun) {
                        return coldata.mangefun.call(this, rowdata);
                    }
                    if (coldata.jscode) {
                        let jscode = coldata.jscode;
                        let func = new Function('rowdata', jscode);
                        func(rowdata)
                    }
                } catch (e) {

                }
            },
            exportxls: function () {
                var title = [];
                _.forEach(this.pzoption.collist, function (obj) {
                    title.push({ "value": obj.colname, "type": "ROW_HEADER_HEADER", "datatype": "string", "colid": obj.colid })
                })

                this.JSONToExcelConvertor(this.qjtabledata, this.pzoption.title + ComFunJS.getnowdate('yyyy-mm-dd'), title);
            },
            JSONToExcelConvertor: function (JSONData, FileName, ShowLabel) {

                var arrData = typeof JSONData != 'object' ? JSON.parse(JSONData) : JSONData;

                var excel = '<table>';
                //设置表头
                var row = "<tr>";
                for (var i = 0, l = ShowLabel.length; i < l; i++) {
                    //解决身份证问题
                    row += '<td style="' + "mso-number-format:'\@';\"" + ">" + ShowLabel[i].value + '</td>';
                }

                //换行
                excel += row + "</tr>";

                //设置数据
                for (var i = 0; i < arrData.length; i++) {
                    var row = "<tr>";

                    for (var j = 0; j < ShowLabel.length; j++) {
                        //解决身份证问题
                        var value = arrData[i][ShowLabel[j].colid];
                        if (value) {
                            value = (value + "").replace(/<[^>]+>/g, "");
                        }
                        row += '<td style="' + "mso-number-format:'\@';\"" + ">\t" + value + "</td>";
                    }

                    excel += row + "</tr>";
                }

                excel += "</table>";

                var excelFile = "<html xmlns:o='urn:schemas-microsoft-com:office:office' xmlns:x='urn:schemas-microsoft-com:office:excel' xmlns='http://www.w3.org/TR/REC-html40'>";
                excelFile += '<meta http-equiv="content-type" content="application/vnd.ms-excel; charset=UTF-8">';
                excelFile += '<meta http-equiv="content-type" content="application/vnd.ms-excel';
                excelFile += '; charset=UTF-8">';
                excelFile += "<head>";
                excelFile += "<!--[if gte mso 9]>";
                excelFile += "<xml>";
                excelFile += "<x:ExcelWorkbook>";
                excelFile += "<x:ExcelWorksheets>";
                excelFile += "<x:ExcelWorksheet>";
                excelFile += "<x:Name>";
                excelFile += "{worksheet}";
                excelFile += "</x:Name>";
                excelFile += "<x:WorksheetOptions>";
                excelFile += "<x:DisplayGridlines/>";
                excelFile += "</x:WorksheetOptions>";
                excelFile += "</x:ExcelWorksheet>";
                excelFile += "</x:ExcelWorksheets>";
                excelFile += "</x:ExcelWorkbook>";
                excelFile += "</xml>";
                excelFile += "<![endif]-->";
                excelFile += "</head>";
                excelFile += "<body>";
                excelFile += excel;
                excelFile += "</body>";
                excelFile += "</html>";


                var uri = 'data:application/vnd.ms-excel;charset=utf-8,' + encodeURIComponent(excelFile);

                var link = document.createElement("a");
                link.href = uri;

                link.style = "visibility:hidden";
                link.download = FileName + ".xls";

                document.body.appendChild(link);
                link.click();
                document.body.removeChild(link);
            }
        },
        watch: {
            'pzoption.collist': { //深度监听，可监听到对象、数组的变化
                handler(newV, oldV) {
                    var chi = this;
                    if (newV) {
                        if (chi.nocache != "") {
                            localStorage.setItem(chi.$root.PageCode + chi.$root.pagedata.ExtData + "fileddata", JSON.stringify(chi.pzoption.collist));
                        }
                        chi.sear = chi.pzoption.collist[0];
                    }
                },
                deep: true
            },
            'seastr': { //深度监听，可监听到对象、数组的变化
                handler(newV, oldV) {
                    var chi = this;
                    chi.tableQuery();

                },
                deep: true
            },
            'pzoption.dataset': { //深度监听，可监听到对象、数组的变化
                handler(newV, oldV) {
                    var pro = this;
                    if (newV) {
                        pro.qjtabledata = pro.pzoption.dataset;

                        if (pro.pzoption.dtcxdata && !pro.ispage) {
                            //不分页,处理动态查询
                            _.forEach(pro.pzoption.dtcxdata, function (obj) {
                                obj.dtsource = pro.mangdtcxdata(obj.cxzd);
                            })
                            pro.tableQuery();

                        }
                    }
                },
                deep: true
            }
        },
        mounted: function () {
            var chi = this;
            chi.$nextTick(function () {
                if (chi.nocache != "" && localStorage.getItem(chi.$root.PageCode + chi.$root.pagedata.ExtData + "fileddata")) {
                    chi.pzoption.collist = JSON.parse(localStorage.getItem(chi.$root.PageCode + chi.$root.pagedata.ExtData + "fileddata"));
                }
                if (localStorage.getItem(chi.$root.PageCode + chi.$root.pagedata.ExtData + "localwidthdata")) {
                    //初始化宽度
                    chi.localwidthdata = JSON.parse(localStorage.getItem(chi.$root.PageCode + chi.$root.pagedata.ExtData + "localwidthdata"));
                    _.forEach(chi.pzoption.collist, function (col) {
                        _.forEach(chi.localwidthdata, function (wid) {
                            if (col.colid == wid.col) {
                                col.width = wid.width;
                            }
                        })
                    })
                }
                if (chi.pzoption.collist.length > 0) {
                    chi.sear = chi.pzoption.collist[0];
                }
            })

        }
    };
</script>